<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100">
        <FormItem label="届名称" prop="name.zh">
            <Input v-model="form.name.zh" placeholder="输入届名称"></Input>
        </FormItem>

        <FormItem label="学段" prop="period_id">
            <Select v-model="form.period_id" @on-change="gradeData" placeholder="请选择学段">
                <Option v-for="(item, index) in periodList" :value="item.id" :key="index">{{ item.period_name.zh?item.period_name.zh:item.period_name.mn }}</Option>
            </Select>
        </FormItem>

        <FormItem label="年级" prop="grade_id">
            <Select v-model="form.grade_id" placeholder="未入校">
                <Option v-for="(item, index) in gradeList" :value="item.id" :key="index">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Option>
            </Select>
        </FormItem>

        <FormItem>
            <Button type="primary" :loading="btnload" @click="handleSubmit('form')">{{ condition?'修改':'添加' }}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            form:{
                name: {
                    zh: null,
                    mn: null,
                    en: null
                },
                period_id: null,
                grade_id: null
            },
            btnload: false,
            addurl:'api/base/v1/arrives/create',
            editurl:'api/base/v1/arrives/update/' + this.condition,
            selUrl: 'api/base/v1/arrives/info/' + this.condition,

            periodList: [],
            periodUrl: 'api/base/v1/get/period/list',
            gradeList: [],
            gradeUrl: 'api/base/v1/get/grade/list?period_id=',

            ruleValidate: {
                'name.zh': [
                    {required: true, message: '请输入届名称', trigger: 'blur'}
                ],
                period_id: [
                    {required: true, type: 'number', message: '请选择学段', trigger: 'change'}
                ],
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            this.$http.post(this.addurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            this.$http.put(this.editurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 学段数据
         * 
         ************************************************************/
        periodData () {
            this.$http.get(this.periodUrl).then(val=>{
                this.periodList = val.data
            }).catch(err => {
                this.$Message.error('学段获取失败！');
            })
        },
        
        /************************************************************
         * 
         * 年级数据
         * 
         ************************************************************/
        gradeData (index) {
            this.$http.get(this.gradeUrl + index).then(val=>{
                let datas = val.data
                datas.push({
                    id: 0,
                    grade_name: '毕业'
                })
                this.gradeList = datas
            }).catch(err => {
                this.$Message.error('年级获取失败！');
            })
        },
        
        /************************************************************
         * 
         * 单条数据查询（修改）
         * 
         ************************************************************/
        selData () {
            this.$http.get(this.selUrl).then(val=>{
                let data = val.data
                this.form.name = data.name
                this.form.period_id = data.period_id
                this.gradeData(data.period_id)
                this.form.grade_id = data.grade_id
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
        this.periodData ()
    },
}
</script>